<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <title>SQL历史</title>
</head>
<body>
<table id="demo" lay-even lay-filter="test"></table>

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
    </div>
</script>

<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table'],function (){
        var $ = layui.jquery,table = layui.table;

        table.render({
            elem: '#demo'
            ,height: 512
            ,url: '/querySqlHis' //数据接口
            ,page: true //开启分页
            ,cols: [[ //表头
                {field: 'id', title: '序号', width:80,type:"numbers"}
                ,{field: 'sql', title: 'SQL', minWidth:400}
                ,{title: '操作', width: 160, toolbar:"#toolbarDemo", align:"center"}
            ]]
        });

        table.on('tool(test)', function(obj){
            switch(obj.event){
                case 'add':
                    //当你在iframe页面关闭自身时
                    parent.myform.sql.value = obj.data.sql;
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    break;
                case 'del':
                    $.ajax({
                        url: "/delSqlHis",
                        data: obj.data,
                        success:function (data){
                           obj.del();
                        }
                    });
                    break;
            };
        });

    });
</script>
</body>
</html>